<template>
  <a-modal v-model="showStatus" :footer="null" :title="ApprovalTitle" :width="570" @ok="showStatus = false">
    <template>
      <div class="approval">
        <a-row type="flex" class="approval-top mg_b10">
          <a-col :span="3">
            <img
              style="width: 48px; height: 48px; border-radius: 50%"
              :src="approvalDetailData.userAvatar ? approvalDetailData.userAvatar : defaultAvatar"
              alt="失败"
            />
          </a-col>
          <a-col :span="20">
            <a-row class="">
              <strong>{{ approvalDetailData.userName }}</strong>
              <span class="sub_tit">(申请人)</span>
            </a-row>
            <a-row class="mg_t5">
              <span
                class="fs12"
                :style="{
                  color: ['#2294FF', '#6A66F6', '#2294FF', '#de0000', '#999', '#6A66F6', '#de0000'][approvalDetailData.status]
                }"
              >
                {{ ["待审批", "审批中", "审批通过", "驳回", "撤回", "其他人通过", "其他人驳回"][approvalDetailData.status] }}
              </span>
            </a-row>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="sub_tit ta-right">审批编号 :</a-col>
          <a-col :span="18" class="fs14 c3 pl10">
            {{ approvalDetailData.approNumber }}
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="sub_tit mt12 ta-right">审批类型 :</a-col>
          <a-col :span="18" class="fs14 c3 mt12 pl10">
            {{ approvalDetailData.approName }}
          </a-col>
        </a-row>
        <a-divider />
        <a-row class="detail-form">
          <k-form-build ref="kfd" :value="jsonData" />
        </a-row>
        <!-- 审批流程 -->
        <div>
          <div class="pd_12 mg_t16 mg_b16 flws c3">
            <strong>审批流程</strong>
          </div>
          <div
            v-for="(item, id) in approvalDetailData.userApproNodeList"
            :key="id"
            class="bl-orange"
            :class="{
              lastone: approvalDetailData.userApproNodeList.length - 1 === id
            }"
          >
            <!-- 发起审批 -->
            <a-row v-if="item.nodeType == 'start'" style="position: relative; margin-left: -19px">
              <a-col :span="3">
                <img
                  :src="approvalDetailData.userAvatar ? approvalDetailData.userAvatar : defaultAvatarDone"
                  class="avatar-mid"
                  :class="approvalDetailData.userAvatar ? '' : 'bor0'"
                  alt="加载失败"
                />
              </a-col>
              <a-col :span="20">
                <a-row>
                  <strong>发起申请</strong>
                  <span class="sub_tit fr">
                    {{ approvalDetailData.gmtCreate ? formatDateAll(approvalDetailData.gmtCreate, "d") : "" }}
                  </span>
                </a-row>
                <a-row class="sub_tit">{{ approvalDetailData.userName }}</a-row>
              </a-col>
            </a-row>
            <!-- 审批人、抄送人 -->
            <a-row v-else>
              <!-- 审批人 单人 -->
              <a-row
                v-if="item.nodeType == 'task' && item.userFlowApproverList && item.userFlowApproverList.length === 1"
                style="position: relative; margin-left: -19px; padding-top: 24px"
              >
                <a-col :span="3">
                  <img
                    :src="item.userFlowApproverList[0].approverUserAvatar ? item.userFlowApproverList[0].approverUserAvatar : defaultAvatar"
                    class="avatar-mid"
                    :class="item.userFlowApproverList[0].approverUserAvatar ? '' : 'bor0'"
                    alt="加载失败"
                  />
                </a-col>
                <a-col :span="20" class="approval-one-notifier">
                  <a-row>
                    <strong>
                      {{ item.userFlowApproverList[0].approverUserName }}
                    </strong>
                    <span>
                      {{ "·" + " " + getStatusTitle(item.approStatus) }}
                    </span>
                    <span class="sub_tit fr">
                      {{ item.gmtNodeEnd ? formatDateAll(item.gmtNodeEnd, "d") : "" }}
                    </span>
                  </a-row>
                  <!-- 抄送人 -->
                  <a-row v-if="item.userFlowApproverList[0].approverOpinion" class="notifier flex-center-start flex-wrap">
                    <span class="opinion">
                      {{ "“" + item.userFlowApproverList[0].approverOpinion + " ”" }}
                    </span>
                  </a-row>
                </a-col>
              </a-row>
              <a-row v-else-if="item.nodeType == 'task'" style="position: relative; margin-left: -19px; padding-top: 24px">
                <a-col :span="3">
                  <img v-if="item.approStatus < 2" :src="defaultAvatarWait" class="avatar-mid bor0" alt="加载失败" />
                  <img
                    v-if="(item.approStatus === 2) | (item.approStatus === 5)"
                    :src="defaultAvatarDone"
                    class="avatar-mid bor0"
                    alt="加载失败"
                  />
                  <img
                    v-if="(item.approStatus === 3) | (item.approStatus === 4) | (item.approStatus === 6)"
                    :src="defaultAvatarBack"
                    class="avatar-mid bor0"
                    alt="加载失败"
                  />
                </a-col>
                <a-col :span="20">
                  <a-row>
                    <strong>{{ item.nodeName }}</strong>
                    <span>
                      {{ "·" + " " + getStatusTitle(item.approStatus) }}
                    </span>
                    <span class="border-type">
                      {{ getActivateType(item.activateType) }}
                    </span>
                    <span @click="showPeople(id)">
                      <img :src="showApprovaler === id ? arrowUp : arrowDown" alt="" class="arrow-icon" />
                    </span>
                    <span class="sub_tit fr">
                      {{ item.gmtNodeEnd ? formatDateAll(item.gmtNodeEnd, "d") : "" }}
                    </span>
                  </a-row>
                  <a-row v-show="showApprovaler === id" class="approvaler-wrap">
                    <a-row v-for="(approvaler, idx3) in item.userFlowApproverList" :key="idx3" class="approvaler-item">
                      <a-row class="flex-center approvaler-info">
                        <a-col>
                          <img
                            style="width: 30px; height: 30px; border-radius: 50%; z-index: 5"
                            :src="approvaler.approverUserAvatar ? approvaler.approverUserAvatar : defaultAvatar"
                            alt="加载失败"
                          />
                        </a-col>
                        <a-col class="username">
                          {{ approvaler.approverUserName }}
                          <span v-if="approvaler.status > 1">
                            {{ "·" + " " + getStatusTitle(approvaler.status) }}
                          </span>
                        </a-col>
                      </a-row>
                      <a-row v-if="approvaler.approverOpinion">
                        <span class="opinion">
                          {{ " “ " + approvaler.approverOpinion + " ” " }}
                        </span>
                      </a-row>
                    </a-row>
                  </a-row>
                </a-col>
              </a-row>
              <a-row v-if="item.nodeType === 'notifier'" class="notifier-row">
                <a-col :span="3">
                  <span class="spot-blue">·</span>
                </a-col>
                <a-col :span="20">
                  <a-row class="notifier">
                    <div class="color222 title">抄送{{ item.userNameList && item.userNameList.length }}人</div>
                    <a-col class="flex-center-start flex-wrap notifierlist">
                      <div v-for="(notifier, idx4) in item.userNameList" :key="idx4">
                        <span>{{ notifier }}</span>
                        <span v-if="item.userNameList.length - idx4 > 1" class="pr10"> , </span>
                      </div>
                    </a-col>
                  </a-row>
                </a-col>
              </a-row>
            </a-row>
          </div>
        </div>
        <a-form v-if="showApprovalHandle" :form="remarkForm" style="padding-bottom: 40px">
          <a-form-item label="审批意见">
            <a-textarea
              v-decorator="[
                'remark',
                {
                  rules: [
                    {
                      required: approvalDetailData.remakeRequire,
                      message: '请填写审批意见'
                    }
                  ]
                }
              ]"
              :placeholder="approvalDetailData.remakeTips ? approvalDetailData.remakeTips : '请填写审批意见'"
              :auto-size="{ minRows: 5, maxRows: 10 }"
            />
          </a-form-item>
          <div v-if="showApprovalHandle" class="drawerFoot">
            <a-space>
              <a-button @click="showStatus = false">取消</a-button>
              <a-button @click="reject">拒绝</a-button>
              <a-button type="primary" @click="agree">通过</a-button>
            </a-space>
          </div>
        </a-form>
      </div>
    </template>
  </a-modal>
</template>
<script>
import moment from "moment";
import defaultAvatar from "@/assets/icons/person1.png";
import defaultAvatarBack from "@/assets/icons/person2.png";
import defaultAvatarDone from "@/assets/icons/person3.png";
import defaultAvatarWait from "@/assets/icons/person4.png";
import arrowUp from "@/assets/icons/sjup.png";
import arrowDown from "@/assets/icons/sjdown.png";
export default {
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ApprovalTitle: "审批详情",
      showStatus: true,
      defaultAvatar,
      defaultAvatarBack,
      defaultAvatarDone,
      defaultAvatarWait,
      arrowUp,
      arrowDown,
      moment,
      jsonData: {
        list: [],
        config: {
          layout: "horizontal",
          labelCol: {
            span: 4
          },
          wrapperCol: {
            span: 18
          },
          hideRequiredMark: false,
          customStyle: ""
        }
      },
      subject: {
        hrOnJob: "入职",
        hrTurnStraight: "转正",
        hrTransferDuty: "调岗",
        hrLeaving: "离职"
      },
      showApprovaler: null,
      showApprovalHandle: false,
      approvalDetailData: this.data.userApproAllInfoList[0]
    };
  },

  methods: {
    handleOk(e) {
      this.$parent.hideList("visibleApprovalModal");
    },
    showPeople(idx) {
      this.showApprovaler = this.showApprovaler === idx ? null : idx;
    },
    getStatusTitle: function (status) {
      // 0:待审批1:审批中2:通过3:驳回4:撤回5:其他人通过6其他人驳回
      if (status === 0) {
        return "待审批";
      } else if (status === 1) {
        return "审批中";
      } else if (status === 2) {
        return "已通过";
      } else if (status === 3) {
        return "已驳回";
      } else if (status === 4) {
        return "已撤回";
      } else if (status === 5) {
        return "其他人通过";
      } else if (status === 6) {
        return "其他人驳回";
      }
      return "其他";
    },
    getActivateType: function (type) {
      // 0:依次审批;1:会签(需所有审批人同意);2:或签(一名审批人同意或拒绝即可)
      if (type === 0) {
        return "依次审批";
      } else if (type === 1) {
        return "会签";
      } else if (type === 2) {
        return "或签";
      }
      return "其他";
    }
  }
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  .w48 {
    width: 48px;
    height: 48px;
    margin-right: 13px;
  }
}
>>> .ant-timeline-item-content {
  margin: 0 0 0 28px;
  min-height: 50px;
}

.space {
  padding-top: 24px;
  padding-left: 16px;
}

>>> .ant-timeline-item-head img {
  width: 35px;
  height: 35px;
}

>>> .ant-timeline-item-content .anticon {
  position: absolute;
  left: -20px;
  top: 15px;
}

.h34 {
  height: 34px;
}

.lh34 {
  line-height: 34px;
}

.pl12 {
  padding-left: 12px;
}

h2 {
  font-size: 16px;
  color: #333;
}

.color3 {
  color: #333;
}
.bgFAFAFA {
  background: #fafafa;
}

.color9C9C9C {
  color: #9c9c9c;
}
.small-title {
  color: #777;
  padding-right: 26px;
}
</style>
